<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>12_指令_内置指令</title>
		<style>
			[v-cloak] { display: none }
  </style>
	</head>
	<body>
		<!--
			常用内置指令
			  v:text : 更新元素的 textContent
			  v-html : 更新元素的 innerHTML
			  v-if : 如果为true, 当前标签才会输出到页面
			  v-else: 如果为false, 当前标签才会输出到页面
			  v-show : 通过控制display样式来控制显示/隐藏
			  v-for : 遍历数组/对象
			  v-on : 绑定事件监听, 一般简写为@
			  v-bind : 强制绑定解析表达式, 可以省略v-bind
			  v-model : 双向数据绑定
			  ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象
			  v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }
		-->
		<div id="example">
			<p v-cloak>{{content}}</p>
			<p v-text="content"></p>
			<!--p.textContent = content-->
			<p v-html="content"></p>
			<!--p.innerHTML = content-->
			<!-- 使用ref给某个标签元素注册一个唯一的标识，通过$refs属性访问这个元素 -->
			<p ref="msg">gqzdev  Vue</p>
			<button @click="hint">提示</button>
		</div>

		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el: '#example',
				data: {
					content: '<a href="http://www.baidu.com">百度一下</a>'
				},
				methods: {
					hint() {
						alert(this.$refs.msg.innerHTML)
					}
				}
			})
		</script>
	</body>
</html>
